写文很顺，配图就卡？我摸索出了两种 AI 找图“黑科技”

如果你跟我一样，是那种写文思路很顺、但一到配图环节就卡住的人，那我们遇到了同一个“写作瓶颈”。

我们最近在群里复盘，发现很多伙伴都是内容写好了，但花在找图、调图上的时间，可能比写正文还多。特别是写干货文和经验分享的，很难找到一张既免版权又精准匹配内容的图。

找不到图怎么办？忍痛放弃或随便配一张？这直接影响了文章的阅读体验和分享意愿。

因为对于一篇文章来说，配图可以让读者视觉得到休息，同时能提升读者的停留时间。对于一些复杂的流程、概念或数据，图片可视化可以降低读者的阅读门槛。

所以，我研究了两个方法，能彻底改变这个局面，特别是第二个方法，简直是 “AI 魔法”：直接让 AI 帮你生成可以截图的 HTML 配图！

方案一：高级“AI 关键词提取”术，找图又快又准

我承认，有时候用 AI 直接生成图片还是需要手动筛选。但相比于自己从头找，我更推荐用 AI 来帮你跑完最耗费精力的“提炼”环节。

我发现，你直接让 AI 提炼关键词，它给的通常太普通、太泛滥（比如：”商业”、”思考”、”未来”）。这样的词你去图库搜，出来的图片几百万张，你还是得挑半天。

所以我设计了一个“高级提示词”，让 AI 帮我把“关键词”、“情绪”和“视觉风格”一起打包生成好！

操作步骤

投喂内容与提示词： 将你的文章全文（或你打算配图的段落）与我的“魔法提示词”一起，丢给任意一个你常用的 AI 聊天工具。
获取检索串： 等待 AI 生成 3-4 组包含视觉风格（如 minimalist clean）的统一检索词串。
图库搜索： 复制 AI 给你的英文词串，直接去免版权图库（如 Pexels, Unsplash）搜索。
快速筛选： 因为检索词串已经非常精准地定位了情绪和风格，你只需在搜索结果里快速挑选，效率比自己想关键词高出几倍。

方案一的Prompt 提示词附在文章结尾处。

方案二：终极“AI 魔法”，用 HTML 截图解决配图精度问题

如果你对配图的“设计感”和“信息传达精度”有更高要求，那我的第二个方法会让你有“Aha-moment”的惊喜。

传统的图片生成，图片内容和文字主题往往是分离的。但如果你的配图本身就是对文章内容进行的可视化和重新排版呢？

我的解决思路是：让 AI 直接生成一个可以截图的“数字杂志页面”！

核心原理：让 AI 扮演设计师

我用一个“创意总监”级别的超长提示词，要求 AI 不仅要理解文章内容，还要扮演专业网页设计师的角色，使用现代前端技术（如 Tailwind CSS, Mermaid.js）为你生成一个美观、易读、且适合截图的 HTML 页面。

这样生成的 HTML 页面，往往会包含：

精致的排版和字体（中文友好）。
核心观点的可视化图表（Mermaid.js）。
高级的设计调性和留白。

随便截取页面的一部分，就是一张设计感极强、信息密度高的配图。

具体操作步骤（三步搞定高级配图）

准备“设计需求书”： 将我的超长提示词（即“创意总监需求文档”）和你的完整文章内容，一起输入给支持代码输出的 AI 工具（例如 Claude，Gemini或 Deepseek， Kimi）。
生成并预览 HTML： 等待 AI 输出完整的 HTML 代码。复制代码，粘贴到一个本地或在线的 HTML 预览器中打开。
截图使用： 网页打开后，你可以：
- 滚动页面，找到排版精美、留白恰当的段落。
- 定位到 AI 帮你生成的概念图或流程图（Mermaid 图表）。
- 使用电脑的截图工具，截取你想要作为文章配图的部分。

方案二的 Prompt 提示词也放在文章结尾处了

好了，这就是我通过社群复盘和个人研究摸索出的两种 AI 找图“黑科技”。它们彻底解决了我们“写文很顺，配图就卡”的难题。

实际上，这两种方法在使用上还是有细微差别的：

方案一（高级关键词检索）： 快速、轻量。 适合你需要一张有情绪、有象征意义的配图时，它帮你快速定位风格化的图库照片。
方案二（HTML 截图法）： 专业、可视化。 适合你需要图表、流程图、概念关系的干货文章，特别是技术或深度分析类的分享，用设计感极强的截图直接为内容赋能。

写作效率的提升，往往就藏在这些小工具和黑科技里。如果你有其他更高效的配图方法，欢迎添加我的微信“linauwawa”并备注“配图”，让我们一起交流碰撞出更美丽的火花。

///

方案一提示词
任务：基于输入的完整文章内容，**主动识别**文章中的 **3-4 个主要观点、核心论点或重要情境**。为每个识别出的观点，生成一组独立的 **统一检索词串**，以适配文章正文插图。

请严格按以下格式，**针对每个识别出的观点**重复输出，确保所有输出内容都符合格式要求。

---

**观点/段落摘要 (Key Point Summary):**
[用 1-2 句简洁的中文，概括你为该组关键词配图所锚定的文章观点/段落核心内容。]

**统一检索词串 (Combined Search Query):**
[**10-13 个英文词汇**，包括**所有关键词和风格标签**，用**空格分隔**。]
*词汇应针对该观点/段落的**具体细节、动作、情绪**，并融合该图片需要的**视觉风格**（如 cinematic, warm, minimalist）。*

**生成逻辑 (Rationale - Max 80 词):**
[不超过 **80 个中文词**，用于解释检索词串的构成逻辑，重点说明情境、情绪与视觉风格的匹配。]

---
[**请对识别出的下一个核心观点/段落，重复以上三项输出**]

---

输入示例：
<content>
[粘贴完整的用户文章内容...]
</content>

输出示例（仅为格式参考，模型需按实际文章内容生成 3-4 组）：

---

**观点/段落摘要 (Key Point Summary):**
探讨了从“守”到“破”的思维转变过程，以及质疑既有假设的重要性。

**统一检索词串 (Combined Search Query):**
question mark shadow broken glass concept person thinking deeply challenging assumptions abstract light lines moody dramatic cool

**生成逻辑 (Rationale - Max 80 词):**
通过“问号阴影”和“破碎玻璃”等象征性意象，结合冷色调（cool）和强烈的戏剧性（dramatic）风格，精准匹配了质疑并打破既有思维模型的复杂心智过程。

---

**观点/段落摘要 (Key Point Summary):**
强调了最小可行实验（MVP）的实践方法，以及小步快跑的优势。

**统一检索词串 (Combined Search Query):**
small steps on path measuring tape close-up hand building with blocks minimal viability test fast iteration process vibrant minimalist clean

**生成逻辑 (Rationale - Max 80 词):**
聚焦工程化和可衡量性（卷尺、积木）的具象概念，采用清晰、简约、高饱和的风格，直观地展现了MVP方法论中“小步快跑”和结果导向的特点。

方案二提示词
你是一名专业的网页设计师和前端开发专家，对现代 Web 设计趋势和最佳实践有深入理解，尤其擅长创造具有极高审美价值的用户界面。你的设计作品不仅功能完备，而且在视觉上令人惊叹，能够给用户带来强烈的"Aha-moment"体验。

请根据最后提供的内容，设计一个**美观、现代、易读**的"中文"可视化网页。请充分发挥你的专业判断，选择最能体现内容精髓的设计风格、配色方案、排版和布局。

**设计目标：**

*   **视觉吸引力：** 创造一个在视觉上令人印象深刻的网页，能够立即吸引用户的注意力，并激发他们的阅读兴趣。
*   **可读性：** 确保内容清晰易读，无论在桌面端还是移动端，都能提供舒适的阅读体验。
*   **信息传达：** 以一种既美观又高效的方式呈现信息，突出关键内容，引导用户理解核心思想。
*   **情感共鸣:** 通过设计激发与内容主题相关的情感（例如，对于励志内容，激发积极向上的情绪；对于严肃内容，营造庄重、专业的氛围）。

**设计指导（请灵活运用，而非严格遵循）：**

*   **整体风格：** 可以考虑杂志风格、出版物风格，或者其他你认为合适的现代 Web 设计风格。目标是创造一个既有信息量，又有视觉吸引力的页面，就像一本精心设计的数字杂志或一篇深度报道。
*   **Hero 模块（可选，但强烈建议）：** 如果你认为合适，可以设计一个引人注目的 Hero 模块。它可以包含大标题、副标题、一段引人入胜的引言，以及一张高质量的背景图片或插图。
*   **排版：**
    *   精心选择字体组合（衬线和无衬线），以提升中文阅读体验。
    *   利用不同的字号、字重、颜色和样式，创建清晰的视觉层次结构。
    *   可以考虑使用一些精致的排版细节（如首字下沉、悬挂标点）来提升整体质感。
    *   Font-Awesome中有很多图标，选合适的点缀增加趣味性。
*   **配色方案：**
    *   选择一套既和谐又具有视觉冲击力的配色方案。
    *   考虑使用高对比度的颜色组合来突出重要元素。
    *   可以探索渐变、阴影等效果来增加视觉深度。
*   **布局：**
    *   使用基于网格的布局系统来组织页面元素。
    *   充分利用负空间（留白），创造视觉平衡和呼吸感。
    *   可以考虑使用卡片、分割线、图标等视觉元素来分隔和组织内容。
*   **调性：**整体风格精致, 营造一种高级感。
*   **数据可视化：** 
    *   设计一个或多个数据可视化元素，展示Naval思想的关键概念和它们之间的关系。
    *   可以考虑使用思想导图、概念关系图、时间线或主题聚类展示等方式。
    *   确保可视化设计既美观又有洞察性，帮助用户更直观地理解Naval思想体系的整体框架。
    *   使用Mermaid.js来实现交互式图表，允许用户探索不同概念之间的关联。

**技术规范：**

*   使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。
    *   Font Awesome: [https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css](https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css)
    *   Tailwind CSS: [https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css](https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css)
    *   非中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
    *   `font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`
    *   Mermaid: [https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js](https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js)
*   实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。
*   代码结构清晰、语义化，包含适当的注释。
*   实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。

**额外加分项：**

*   **微交互：** 添加微妙而有意义的微交互效果来提升用户体验（例如，按钮悬停效果、卡片悬停效果、页面滚动效果）。
*   **补充信息：** 可以主动搜索并补充其他重要信息或模块（例如，关键概念的解释、相关人物的介绍等），以增强用户对内容的理解。
*   **延伸阅读:** 分析文件后，提供一份"进一步阅读"的简短清单，推荐 5 本最佳相关书籍或论文，并提供简要说明或链接。

**输出要求：**

*   提供一个完整、可运行的单一 HTML 文件，其中包含所有必要的 CSS 和 JavaScript。
*   确保代码符合 W3C 标准，没有错误或警告。

请你像一个真正的设计师一样思考，充分发挥你的专业技能和创造力，打造一个令人惊艳的网页！

待处理内容：{{content}}，等待用户输入后再生成 html